<template>
  <div class="home">
    <!-- 首页 -->
    <div class="nav">
      <router-link to="/home/city" class="city">{{ city }}</router-link>
      <van-search
        v-model="searchVal"
        shape="round"
        background="#fff"
        placeholder="搜索商品"
        class="searching"
      />
    </div>

    <!-- <div id="allmap"></div> -->

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="my-swipe">
      <van-swipe-item
        v-for="item in list.banner"
        :key="item.id"
        class="van-swipe-item"
      >
        <img v-lazy="item.image_url" />
      </van-swipe-item>
    </van-swipe>

    <!-- 频道 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="item in list.channel"
        :key="item.id"
        @click="goCategorylist(item.id)"
        :icon="item.icon_url"
        :text="item.name"
      />
    </van-grid>

    <!-- 品牌制造商直供 -->
    <p class="title" @click="goBrandlist">品牌制造商直供</p>
    <van-grid :border="false" :column-num="2" :gutter="0" class="brandList">
      <van-grid-item
        v-for="item in list.brandList"
        :key="item.id"
        style="padding: 0"
        width="178"
        height="116"
        @click="goBranddetail(item.id)"
      >
        <van-image style="width:100% height:100%" :src="item.new_pic_url" />
        <p class="brandList-name">{{ item.name }}</p>
        <p class="brandList-price">{{ item.floor_price }}起</p>
      </van-grid-item>
    </van-grid>

    <!-- 新品首发 -->
    <div class="new" @click="goIsNew">
      <div class="box">
        <p class="new-first">新品首发</p>
        <p class="lookAll">查看全部</p>
      </div>
    </div>

    <div class="new-commodity">
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="item in list.newGoods" :key="item.id" @click="detailaction">
          <van-image :src="item.list_pic_url" />
          <p>{{ item.name }}</p>
          <p>{{ item.goods_brief }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 人气推荐 -->
    <div class="hot" @click="goIsHot">
      <div class="box">
        <p class="new-first">人气推荐,好物精选</p>
        <p class="lookAll">查看全部</p>
      </div>
    </div>

    <div class="hot-recommend">
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="item in list.hotGoods" :key="item.id" @click="detailaction">
          <van-image :src="item.list_pic_url" />
          <p>{{ item.name }}</p>
          <p>{{ item.goods_brief }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 专题精选 -->
    <p class="project">专题精选</p>

    <div class="project-selection">
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in list.topicList" :key="item.id" @click="detailaction">
          <van-image :src="item.item_pic_url" />
          <p>{{ item.title }}</p>
          <p>{{ item.subtitle }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 居家好物 -->

    <div class="goodsList" v-for="item in list.newCategoryList" :key="item.id">
      <p style="text-align: center; padding: 12.5px 0">{{ item.name }}好物</p>
      <van-grid :border="false" :column-num="2" :gutter="5">
        <van-grid-item v-for="item1 in item.goodsList" :key="item1.id" @click="detailaction(item1.id)">
          <van-image :src="item1.list_pic_url" />
          <p style="text-align: left; width: 100%; margin-bottom: 10px">
            {{ item1.name }}
          </p>
          <p style="text-align: left; width: 100%; color: #9c3232">
            ¥{{ item1.retail_price }}
          </p>
        </van-grid-item>
        <van-grid-item @click="goCategorylist(item.id)">
          <p style="text-align: center; font-size: 18px">{{ item.name }}好物</p>
          <img
            style="width: 35px; height: 35px; margin-top: 20px"
            src="../../../images/icon_go_more.png"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <tabbar></tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

// import Swiper from "swiper"
import { mapState, mapMutations } from "vuex";
import { index } from "@/api/home";
import tabbar from "@/components/tabbar.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
    tabbar,
  },

  data() {
    return {
      searchVal: "",
      city: "",
      list: [],
      count: 0,
      // 新品与人气接收的数据
      new: {
        isHot: "",
        isNew: "",
        order: "",
      },
    };
  },

  computed: {
    ...mapState(["cityInfo"]),
  },

  created() {
    index().then((res) => {
      console.log(res);
      this.list = res;
      console.log(this.list);
    });
    var userInfo = {
      openId: "18406591687",
      nickName: "赵六",
      avatarUrl:
        "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
    };
    var openId = userInfo.openId;
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
    localStorage.setItem("openId", openId);
  },

  mounted() {
    //
    //   如果有数据 优先使用vuex中存储的数据
    if (this.cityInfo.city) {
      console.log("使用vuex中的数据", this.cityInfo.city);
      this.city = this.cityInfo.title;
      console.log("使用vuex中的数据", this.city);
    } else {
      var _this = this;
      // var map = new BMap.Map("allmap"); // 创建Map实例
      // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件

      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(r);
            _this.city = r.address.city;
            console.log("使用地图的数据");
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    }
  },

  methods: {
    ...mapMutations(["addId"]),
    // 前往商品分类列表
    goCategorylist(val) {
      this.addId(val);
      this.$router.push("/home/categorylist");
    },
    // 前往品牌商直供列表
    goBrandlist() {
      this.$router.push("/home/brandlist");
    },
    //将数据传给品牌详情页
    goBranddetail(id) {
      console.log(id);
      this.$router.push({ path: "/home/branddetail", query: { id } });
    },
    //前往新品首发页面
    goIsNew() {
      this.new.isNew = 1;
      this.$router.push({
        path: "/home/isNew",
        query: {
          value: JSON.stringify(this.new),
        },
      });
    },
    //前往人气推荐页面
    goIsHot() {
      this.new.isHot = 1;
      this.$router.push({
        path: "/home/isNew",
        query: {
          value: JSON.stringify(this.new),
        },
      });
    },
    //前往商品详情页面
    detailaction(val){
      this.$router.push({path:"/home/detailaction",query:{val}})
    }

    



  },
};
</script>










<style lang="scss">
body {
  background-color: #f4f4f4;
}
// 品牌直供
.brandList .van-grid-item__content {
  padding: 5px;
  height: 117px;
}

// 新品首发轮播
// .new-commodity .van-grid-item p{
//   // overflow: hidden;
//   // text-overflow:ellipsis;
//   // white-space: nowrap;
// }
</style>
<style lang="scss" scoped>
// @import"../../../node_modules/swiper/vue/swiper-bundle.css"
// 导航搜索栏
.nav {
  height: 50px;
}
.city {
  float: left;
  line-height: 50px;
  font-size: 12px;
  width: 15%;
  text-align: center;
  background-color: #fff;
}
.searching {
  float: right;
  width: 85%;
}

// 轮播图
.my-swipe {
  width: 100%;
}
.my-swipe .van-swipe-item {
  width: 100%;

  img {
    width: 100%;
    height: 200px;
  }
}

// 品牌制造商直供
.title,
.project {
  padding: 20px 0;
  text-align: center;
  background-color: #fff;
  margin-top: 8px;
}
.brandList .van-grid-item {
  position: relative;
}
.brandList .brandList-name {
  position: absolute;
  top: 15%;
  left: 5%;
}
.brandList .brandList-price {
  position: absolute;
  top: 35%;
  left: 5%;
}

// 新品首发
.new {
  width: 100%;
  height: 122px;
  background: url()
    no-repeat;
  background-size: contain;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new .new-first {
  color: #8c9bae;
  font-size: 16px;
}
.new .lookAll {
  width: 90px;
  height: 24px;
  color: #8c9bae;
  background-color: #d8e4f0;
  margin: 0 auto;
  text-align: center;
  line-height: 25px;
  margin-top: 13.5px;
}

// 人气推荐
.hot {
  width: 100%;
  height: 122px;
  background: url()
    no-repeat;
  background-size: contain;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hot .new-first {
  color: #b1a279;
  font-size: 16px;
}
.hot .lookAll {
  width: 90px;
  height: 24px;
  color: #b1a279;
  background-color: #f4e9cb;
  margin: 0 auto;
  text-align: center;
  line-height: 25px;
  margin-top: 13.5px;
}
</style>
